<template>
  <Card :shadow="shadow">
    <div class="card-name"><div class="name">新建菜单</div></div>
    <div class="content-con">
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="user-item">
        <Form-item label="菜单名" prop="menu_name">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.menu_name" size="large" placeholder="请输入菜单名"></i-input></i-col>
          </Row>
        </Form-item>
        <Form-item label="父级ID" prop="pid">
          <Row>
            <Col span='10'>
            <selectTree v-model="formValidate.pid" clearable :treeData="menuTree"></selectTree>
            </Col>
          </Row>
        </Form-item>
        <Form-item label="模块名" prop="module">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.module" size="large" placeholder="请输入模块名"></i-input></i-col>
          </Row>
        </Form-item>
        <Form-item label="控制器名" prop="controller">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.controller" size="large" placeholder="请输入控制器名"></i-input></i-col>

          </Row>
        </Form-item>
        <Form-item label="方法名" prop="action">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.action" size="large" placeholder="请输入方法名"></i-input></i-col>
          </Row>
        </Form-item>
        <Form-item label="路由名(name)" prop="pid">
          <Row>
              <Col span='10'>
            <selectTree v-model="formValidate.router_name" clearable :treeData="routerTree"></selectTree>
            </Col>
          </Row>
        </Form-item>
        <Form-item label="参数" prop="param">
          <Row>
            <i-col span="10"><i-input v-model="formValidate.param" size="large" placeholder="a/123/b/234"></i-input></i-col>
          </Row>
        </Form-item>

        <Form-item label="是否显示菜单" prop="is_show">
          <Radio-group v-model="formValidate.is_show" size="large">
            <Radio label="1"><span>是</span></Radio>
            <Radio label="0"><span>否</span></Radio>
          </Radio-group>
        </Form-item>
        <div class="ban-btn">

          <Button size="large" @click="goBack">返回</Button>
           <Button @click="handleSubmit()" type="success" size="large">保存</Button>
        </div>
      </i-form>
    </div>
  </Card>
</template>
<script>
import { saveMenu } from '@/api/menu'
import selectTree from 'iview-select-tree'
import { changeTreeData } from '@/libs/tools'
import { mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'menu-add',
  components: {
    selectTree
  },
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      menuTree: [],
      routerTree: [],
      formValidate: {
        menu_name: '',
        pid: '',
        module: '',
        controller: '',
        action: '',
        router_name: '',
        params: [],
        is_show: '1'
      },
      ruleValidate: {
        menu_name: [
          {
            required: true,
            message: '请输入菜单名',
            trigger: 'blur'
          }
        ],
        router_name: [
          {
            required: true,
            message: '请选择路由名',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.tidyRes()
    this.getRouterTree()
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    tidyRes () {
      var data = []
      this.menuTree = this.$store.state.user.userInfo.menuList

      this.menuTree.map(menu => {
        data.push(this.initMenu(menu))
      })
      this.$set(this, 'menuTree', data)
      this.menuTree.unshift({
        'value': 0,
        'title': '顶级'
      })
    },
    initMenu (menu) {
      var data = {}
      data.title = menu.menu_name
      data.value = menu.id
      data.expand = false
      if (menu.child && menu.child.length > 0) {
        data.children = []
        menu.child.map(child => {
          data.children.push(this.initMenu(child))
        })
      }
      return data
    },
    getRouterTree () {
      let routerData = this.$store.getters.routersList
      this.routerTree = routerData
      let routerObj = this.routerTree

      let oldKey = ['name']
      let replaceKey = ['value']
      for (var i = 0; i < routerObj.length; i++) {
        changeTreeData(routerObj[i], oldKey, replaceKey)
      }
    },
    // 返回按钮
    goBack () {
      this.closeTag({
        name: 'menu-add'
      })
      // this.$router.push({ name: 'access_menu' })
    },
    // 表单验证
    handleSubmit () {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          saveMenu({ ...this.formValidate }).then(res => {
            this.$Modal.confirm({
              title: '提示',
              content: res.msg,
              okText: '继续添加',
              cancelText: '返回菜单列表',
              onCancel: this.goBack

            })
          }).catch(res => {
            this.$Message.error(res.msg)
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>
<style lang="less">
.user-item .ivu-form-item-label {
  font-size: 14px;
}
.user-right {
  margin-left: 15px;
  color: #999;
  font-size: 14px;
  height: 36px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
